<!--
 * @Author: panda
 * @Date: 2022-05-18 10:40
 * @Description: 视频搜索结果容器组件
-->
<template>
  <el-row
    v-for="(data, index) in results"
    :key="index"
    style="padding-top: 10px; padding-bottom: 10px"
  >
    <el-col :span="2" />
    <!-- 遍历卡片信息前四个 并传到feedCard组件上进行展示出来 -->
    <el-col v-for="item in data" :key="item.id" :span="4">
      <!-- 将接收到的对象所有属性传过去  v-bind: 解构传递-->
      <FeedCard v-bind="item" />
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { defineComponent, reactive, watchEffect } from "vue";
import FeedCard from "@/components/feedCard/FeedCard.vue";

export default defineComponent({
  components: {
    FeedCard,
  },
  props: {
    videos: Array,
  },
  setup(props) {
    console.log("container收到数据了====>", props.videos);

    // 存储传递到该组件的数据，并做响应式处理，否则无法渲染页面
    const datas = reactive([]);
    // 存储一维数组转二维数组的数据
    const results = reactive([]);
    // 当传递过来的数组只有一个值时，底层自动变为Object，把它放进数组，后续统一处理
    if (!Array.isArray(props.videos)) {
      datas.push(props.videos as never);
    } else {
      datas.push(...(props.videos as never[]));
    }
    // 响应式追踪父组件传递过来的数据的依赖
    watchEffect(() => {
      datas.length = 0;
      if (!Array.isArray(props.videos)) {
        datas.push(props.videos as never);
        console.log(datas);
      } else {
        datas.push(...(props.videos as never[]));
      }
      // 一维转二维
      // 计算分类下视频卡片信息的长度和长度的一半，用于循环遍历数据
      const len = datas.length;
      const lineQuanlity = 5; // 一行有五个
      const lineNum =
        len % lineQuanlity === 0
          ? len / lineQuanlity
          : Math.floor(len / lineQuanlity) + 1; // 计算行数
      // 清除上一个页面的转化数据
      results.length = 0;
      for (let i = 0; i < lineNum; i++) {
        const temp = datas.slice(
          i * lineQuanlity,
          i * lineQuanlity + lineQuanlity
        );
        results.push(temp as never); // 浅层拷贝
      }
    });

    return {
      results,
    };
  },
});
</script>

<style scoped>
/* 视频搜索结果展示 */
.el-row {
  /* margin-top: 20px; */
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-row .el-col {
  /* margin-left: 10px; */
}

.el-col {
  width: 230px;
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
